<template>
  <div class="nav_content">
    <div v-if="showTitle" class="show_title">快捷导航</div>
    <div v-for="(item,index) in navList" :key="index" class="nav_list">
      <p class="nav_heead">
        <img src="../../assets/group.png" class="nav_icon">
        <span>{{ item.meta.title }}</span>
      </p>
      <div class="nav_list_flex">
        <el-button v-for="(val,inx) in item.children" :key="inx" class="flex_item" @click="tapUrl(item.path+'/'+val.path)">
          {{ val.meta.title }}
        </el-button>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      navList: []
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
    routes() {
      return this.$store.state.permission.routes
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log('获取异步路由信息===')
      console.log(this.routes)
      const arr = this.routes.slice(5, this.routes.length)
      console.log(arr)
      this.navList = arr
    },
    tapUrl(path) {
      console.log(path)
      this.$router.push({ path: path })
    }

  }
}
</script>

<style scoped>
 .show_title{
     padding: 10px 0;
     text-align: right;
     color: grey;
 }
.nav_icon{
    vertical-align: middle;
    padding-right: 10px;
}
 .nav_heead{
     margin: 0;
     font-size: 18px;
     color: #1890FFFF;
     font-weight:600;
 }
 .nav_list_flex{
     display: flex;
     flex-flow: wrap;
     padding: 30px 0;
 }
 .flex_item{
     width:127px;
    height:80px;
    /* line-height: 80px; */
    text-align: center;
    background:rgba(255,255,255,1);
    border-radius:2px;
    border:1px solid rgba(230,230,230,1);
    margin-right: 10px;
    font-size:15px;
    font-weight: 400;
    box-shadow: 0 1px 5px #aaaaaa;
 }

</style>
